import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';

interface BarProps {
  data: { name: string; value: number }[] | { data: any[] };
  draw?: boolean;
  height?: number;
  colors?: string[];
  axisLabelInfo?: Object;
  xAxisLineColor?: string;
  yAxisLineColor?: string;
  showLegend?: boolean;
  legendTextColor?: string;
  legendItemGap?: number;
  legendBottomGap?: number;
  splitLineInfo?: Object;
}

const EBar = ({ 
  data, 
  draw = true, 
  height = 300, 
  colors = ['#37A2FF', '#67E0E3', '#FFDB5C', '#FF9F7F', '#E062AE', '#37A2DA'],
  axisLabelInfo,
  xAxisLineColor,
  yAxisLineColor,
  showLegend = false,
  legendTextColor = '#fff',
  legendItemGap = 10,
  legendBottomGap = 10,
  splitLineInfo = {
    lineStyle: {
      type: 'dashed', // 将分隔线设置为虚线
      color: '#333'   // 可以设置虚线颜色
    }
  }
}: BarProps) => {
  const chartRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    // 处理不同数据结构
    const chartData = Array.isArray(data) ? data : data?.data || [];
    if (!chartData.length || !draw || !chartRef.current) return;
    
    // 初始化图表
    const chart = echarts.init(chartRef.current);
    
    // 配置项
    const options: EChartsOption = {
      grid: {
        top: 10,
        right: 10,
        bottom: showLegend ? 20 : 0,  // 根据是否显示图例调整底部间距
        left: 20,
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: (params: any) => {
          const param = params[0];
          return `${param.name}<br/>次数：${param.value}`;
        }
      },
      xAxis: {
        type: 'category',
        data: chartData.map((item: any) => item.name || item.name),
        axisLabel: {
          interval: 0,
          color: '#fff',
          ...(axisLabelInfo || {})
        },
        axisLine: {
          lineStyle: {
            color: xAxisLineColor || '#fff'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#fff',
          ...(axisLabelInfo || {})
        },
        axisLine: {
          lineStyle: {
            color: yAxisLineColor || '#fff'
          }
        },
        splitLine: splitLineInfo
      },
      legend: {
        show: showLegend,
        bottom: legendBottomGap,
        left: "center",
        itemGap: legendItemGap,
        textStyle: {
          color: legendTextColor
        },
        formatter: (name: string) => `{a|${name}}`
      },
      series: [
        {
          type: 'bar',
          data: chartData.map((item: any) => item.value),
          barWidth: 20,
          itemStyle: {
            borderRadius: [4, 4, 0, 0],
            color: function(params: any) {
              if (colors) {
                return colors[params.dataIndex % colors.length];
              }
              return '#5B8FF9';
            }
          }
        }
      ]
    };

    // 渲染图表
    chart.setOption(options);

    // 响应式处理
    const handleResize = () => {
      chart.resize();
    };
    window.addEventListener("resize", handleResize);

    // 清理函数
    return () => {
      chart.dispose();
      window.removeEventListener("resize", handleResize);
    };
  }, [data, draw, colors, axisLabelInfo, xAxisLineColor, yAxisLineColor, showLegend, legendTextColor, legendItemGap, legendBottomGap, splitLineInfo]);

  return (
    <div 
      ref={chartRef} 
      style={{ 
        width: '100%', 
        height: height || '100%', 
        paddingTop: 12 
      }} 
    />
  );
};

export default EBar;